<!DOCTYPE html>
<html>
	<head>
		<head>
			<meta charset="utf-8">
			<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
			<title>直播列表</title>
			<link rel="stylesheet" type="text/css" href="../css/public.css" />
			<link rel="stylesheet" type="text/css" href="../css/topbo_public.css" />
			<link rel="stylesheet" type="text/css" href="../css/live.css" />
			<script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
			<script src="../js/mock.js" type="text/javascript" charset="utf-8"></script>
			<script src="../js/databese.js" type="text/javascript" charset="utf-8"></script>
		</head>
	</head>
	<body>
		<div class="live-list live">
			<div class="toop-public space-between">
				<a href="#" class="reverse">
					<img src="../img/reverse.svg">
				</a>
				<h3 class="title">直播列表</h3>
				<div class="function">
					<img src="../img/function.png">
				</div>
			</div>
			
			<ul class="listve-list space-around">
				<li>全部</li>
				<li>直播/点播</li>
				<li>免费</li>
				<li>历史回放</li>
			</ul>
			
			<div class="first-video vid-style">
				<video class="video" controls>
					<source src="../video/ideality.mp4" type="video/mp4" class="vid-src">
				</video>
				<h6 class="vid-title"></h6>
				<p class="vid-text"></p>
				<div class="fir-bottom space-between">
					<em class="vid-price"></em>
					<span class="vid-action"></span>
				</div>
			</div>
			
			<ul class="live-list vid-style flex">
				<li class="list">
					<video class="lit-video" controls>
						<source type="video/mp4" class="vid-src" src="../video/ideality.mp4">
					</video>
					<h6 class="vid-title"></h6>
					<p class="vid-text"></p>
					<div class="fir-bottom space-between">
						<em class="vid-price"></em>
						<span class="vid-action"></span>
					</div>
				</li>
			
				<li class="list">
					<video class="lit-video" controls>
						<source type="video/mp4" class="vid-src" src="../video/ideality.mp4">
					</video>
					<h6 class="vid-title"></h6>
					<p class="vid-text"></p>
					<div class="fir-bottom space-between">
						<em class="vid-price"></em>
						<span class="vid-action"></span>
					</div>
				</li>
			
				<li class="list">
					<video class="lit-video" controls>
						<source type="video/mp4" class="vid-src" src="../video/ideality.mp4">
					</video>
					<h6 class="vid-title"></h6>
					<p class="vid-text"></p>
					<div class="fir-bottom space-between">
						<em class="vid-price"></em>
						<span class="vid-action"></span>
					</div>
				</li>
			
				<li class="list">
					<video class="lit-video" controls>
						<source type="video/mp4" class="vid-src" src="../video/ideality.mp4">
					</video>
					<h6 class="vid-title"></h6>
					<p class="vid-text"></p>
					<div class="fir-bottom space-between">
						<em class="vid-price"></em>
						<span class="vid-action"></span>
					</div>
				</li>
			</ul>
		</div>
		
		<script type="text/javascript">
				function video() {
					var vidTitle = document.getElementsByClassName("vid-title");
					var vidText = document.getElementsByClassName("vid-text");
					var vidPrice = document.getElementsByClassName("vid-price");
					var vidAction = document.getElementsByClassName("vid-action");
			
					mock.video.forEach(function(obj, index) {
			
						vidTitle[index].innerHTML += obj.vidtitle;
						vidText[index].innerHTML += obj.vidtext;
						vidPrice[index].innerHTML += obj.price;
						vidAction[index].innerHTML += obj.action;
			
					})
			
				};
			
				video();
		</script>
	</body>
</html>
